<template>
  <div class="line-echart">
    <base-echarts :option="option" chartHeight="300px"></base-echarts>
  </div>
</template>

<script setup lang="ts">
/* 
  xxx-echart 负责将options配置做单独组件的封装
*/
import { defineProps, computed } from "vue"
import BaseEcharts from "./Base-echarts.vue"
import type { EChartsOption } from "echarts"

const props = defineProps<{
  xAxisData: string[]
  yAxisData: string[]
  data: any[]
}>()

const option = computed<EChartsOption>(() => {
  return {
    tooltip: {
      trigger: "axis"
    },
    // 图例
    legend: {
      data: props.xAxisData,
      top: "1%",
      textStyle: {
        color: "black",
        fontSize: "12"
      }
    },
    // 直角坐标系内绘图网格
    grid: {
      top: "15%",
      left: "3%",
      right: "4%",
      bottom: "2%",
      // grid 区域是否包含坐标轴的刻度标签。（即坐标轴要在盒子里面）
      containLabel: true
    },
    // 工具栏
    /*  toolbox: {
          // 各工具配置项。
          // 除了各个内置的工具按钮外，还可以自定义工具按钮。
          feature: {
            saveAsImage: {},
          },
        }, */
    xAxis: {
      // 'category' 类目轴，适用于离散的类目数据。
      type: "category",
      // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
      boundaryGap: false,
      data: props.yAxisData
    },
    yAxis: {
      type: "value"
    },
    series: props.data
  }
})
</script>

<style lang="less" scoped></style>
